<template>
  <div class="face-Warning-map">
    <div class="face-Warning-map-box" id="map-container"></div>
    <!-- <div class="hhhh" @click="getFaceMapData">hhhh</div> -->
    <div class="all-checkbox-list">
      <nanning-screen-checkbox @on-change-checkbox="onChangeCheckbox" @on-change-visible="onChangeVisible" v-model="checkedLabel" :visibleCheckboxList="visibleCheckboxList"></nanning-screen-checkbox>
    </div>
    <car-infor-pop></car-infor-pop>
    <warning-detail-pop class="warning-detail-pop" @on-visible-site-pop="onVisibleSitePop"></warning-detail-pop>
    <site-infor-pop @on-visible-car-pop="onVisibleCarPop"></site-infor-pop>
    <search-pop id="search-pop"></search-pop>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import carInforPop from '../../components/carInforPop/index.vue'
import warningDetailPop from '../../components/warningDetailPop/index.vue'
import siteInforPop from '../../components/siteInforPop/index.vue'
import searchPop from '../../components/searchPop/index.vue'
import Bus from 'utils/eventBus'
// @ts-ignore
import FaceEarlyWarning from '../../../basic/FaceEarlyWarning.js'
// @ts-ignore
// import FaceAnimationTest from '../../../basic/FaceAnimationTest.js'
// @ts-ignore
// import Test from '../../../basic/test.js'

@Component({
  name: 'face-Warning-map',
  components: {
    carInforPop,
    warningDetailPop,
    siteInforPop,
    searchPop
  }
})
export default class FceWarningMap extends Vue {
  private map: any = ''

  private checkedLabel = [1, 2, 3] // 默认选中的值

  private lineData = [
    {
      path: [
        [108.342842, 22.810566],
        [108.339364, 22.810027],
        [108.335526, 22.809509],
        [108.335526, 22.809406],
        [108.324972, 22.811504],
        [108.324515, 22.818723],
        [108.324159, 22.822535],
        [108.318715, 22.822746],
        [108.314786, 22.821154],
        [108.310098, 22.819045],
        [108.307876, 22.818096],
        [108.304838, 22.817881],
        [108.301434, 22.818904],
        [108.297281, 22.819445],
        [108.291441, 22.819996],
        [108.290971, 22.817136],
        [108.28944, 22.811799],
        [108.28793, 22.810503],
        [108.284853, 22.809851],
        [108.281643, 22.812574],
        [108.279905, 22.814589],
        [108.28126, 22.821193],
        [108.278668, 22.823257],
        [108.274727, 22.824555]
      ]
    }
  ]

  private markerData = [
    {
      center: [108.342842, 22.810566],
      userData: {
        title: '1',
        id: '2',
        name: '张三'
      },
      icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
    },
    {
      center: [108.324159, 22.822535],
      userData: {
        title: '1',
        id: '2',
        name: '张三'
      },
      icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
    },
    {
      center: [108.342842, 22.810566],
      userData: {
        title: '1',
        id: '2',
        name: '张三'
      },
      icon: require('assets/images/situational-awareness/renlianyujing-map-car.png')
    },
    {
      center: [108.297281, 22.819445],
      userData: {
        title: '1',
        id: '2',
        name: '张三'
      },
      icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
    },
    {
      center: [108.274727, 22.824555],
      userData: {
        title: '1',
        id: '2',
        name: '张三'
      },
      icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
    }
  ]

  private visibleCheckboxList = true

  private onChangeCheckbox(value: any) {
    console.log('多选框选中的值', value)
  }

  private onChangeVisible(value: any) {
    this.visibleCheckboxList = value
  }

  // 显示站点弹框
  private onVisibleSitePop() {
    this.map.setOverlay('.site-infor-pop')
  }

  // 显示车辆信息弹框
  private onVisibleCarPop() {
    this.map.setOverlay('.car-infor-pop')
  }

  created() {
    Bus.$on('onClickFaceWarningSearch', (value: any) => {
      console.log('人脸预警---地图盒子', value)
    })
  }

  mounted() {
    this.initMap()
  }

  initMap() {
    this.map = new FaceEarlyWarning()
    this.map.initAll()
    // const map = new Test()
    // console.log('map', map)
    // // 带小球动画的文件
    // this.map = new FaceAnimationTest()
    // this.map.initAll({ lineDate: this.lineData, markerData: this.markerData })
  }

  private getFaceMapData() {
    console.log('getFaceMapData')
    // this.faceMapData.forEach((item, index) => {
    //   if (index === 0) {
    //     const params = {
    //       index: index,
    //       data: {
    //         name: '南湖公园',
    //         lng: 108.342842,
    //         lat: 22.810566,
    //         marker: {
    //           userData: {
    //             title: '1',
    //             id: '2',
    //             name: '张三'
    //           },
    //           icon: require('assets/images/situational-awareness/renlianyujing-map-car.png')
    //         }
    //       }
    //     }
    //     this.map.addNewLine(params)
    //   } else {
    //     const params = {
    //       index: index,
    //       data: {
    //         name: '江南客运站',
    //         lng: 108.308622,
    //         lat: 22.768183,
    //         marker: {
    //           userData: {
    //             title: '1',
    //             id: '2',
    //             name: '张三'
    //           },
    //           icon: require('assets/images/situational-awareness/renlianyujing-map-icon.png')
    //         }
    //       }
    //     }
    //     this.map.addNewLine(params)
    //   }
    // })
  }
}
</script>

<style lang="scss" scoped>
.face-Warning-map {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  &-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
  }
  .all-checkbox-list {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: calc(25.47% + 6px);
    top: 20px;
    animation: fadeInLeftList 0.7s linear;
  }
  #search-pop {
    position: absolute; // 定位的基准是中间地图的大盒子
    left: 55%;
    top: 50%;
  }
  .hhhh {
    width: 200px;
    height: 100px;
    background: red;
    position: absolute; // 定位的基准是中间地图的大盒子
    left: 55%;
    top: 20%;
  }
}
</style>
